﻿<!doctype html>
<html>
<head>
  <title>起步</title>
</head>
<body>

<div id="app">

</div>
<script  >

  // Regular Expressions for parsing tags and attributes
  let startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:@][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
          endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
          attr = /([a-zA-Z_:@][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g

  // Empty Elements - HTML 5
  let empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr")

  // Block Elements - HTML 5
  let block = makeMap("a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video")

  // Inline Elements - HTML 5
  let inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var")

  // Elements that you can, intentionally, leave open
  // (and which close themselves)
  let closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr")

  // Attributes that have their values filled in disabled="disabled"
  let fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected")

  // Special Elements (can contain anything)
  let special = makeMap("script,style")

  function makeMap(str) {
    var obj = {}, items = str.split(",");
    for (var i = 0; i < items.length; i++)
      obj[items[i]] = true;
    return obj;
  }

  function HTMLParser(html, handler) {
    var index, chars, match, stack = [], last = html;
    stack.last = function () {
      return this[this.length - 1];
    };

    while (html) {
      chars = true;

      // Make sure we're not in a script or style element
      if (!stack.last() || !special[stack.last()]) {

        // Comment
        if (html.indexOf("<!--") == 0) {
          index = html.indexOf("-->");

          if (index >= 0) {
            if (handler.comment)
              handler.comment(html.substring(4, index));
            html = html.substring(index + 3);
            chars = false;
          }

          // end tag
        } else if (html.indexOf("</") == 0) {
          match = html.match(endTag);

          if (match) {
            html = html.substring(match[0].length);
            match[0].replace(endTag, parseEndTag);
            chars = false;
          }

          // start tag
        } else if (html.indexOf("<") == 0) {
          match = html.match(startTag);

          if (match) {
            html = html.substring(match[0].length);
            match[0].replace(startTag, parseStartTag);
            chars = false;
          }
        }

        if (chars) {
          index = html.indexOf("<");

          var text = index < 0 ? html : html.substring(0, index);
          html = index < 0 ? "" : html.substring(index);

          if (handler.chars)
            handler.chars(text);
        }

      } else {
        html = html.replace(new RegExp("([\\s\\S]*?)<\/" + stack.last() + "[^>]*>"), function (all, text) {
          text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, "$1$2");
          if (handler.chars)
            handler.chars(text);

          return "";
        });

        parseEndTag("", stack.last());
      }

      if (html == last)
        throw "Parse Error: " + html;
      last = html;
    }

    // Clean up any remaining tags
    parseEndTag();

    function parseStartTag(tag, tagName, rest, unary) {
      tagName = tagName.toLowerCase();

      if (block[tagName]) {
        while (stack.last() && inline[stack.last()]) {
          parseEndTag("", stack.last());
        }
      }

      if (closeSelf[tagName] && stack.last() == tagName) {
        parseEndTag("", tagName);
      }

      unary = empty[tagName] || !!unary;

      if (!unary)
        stack.push(tagName);

      if (handler.start) {
        var attrs = [];

        rest.replace(attr, function (match, name) {
          var value = arguments[2] ? arguments[2] :
                  arguments[3] ? arguments[3] :
                          arguments[4] ? arguments[4] :
                                  fillAttrs[name] ? name : "";

          attrs.push({
            name: name,
            value: value,
            escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"
          });
        });

        if (handler.start)
          handler.start(tagName, attrs, unary);
      }
    }

    function parseEndTag(tag, tagName) {
      // If no tag name is provided, clean shop
      if (!tagName)
        var pos = 0;

      // Find the closest opened tag of the same type
      else
        for (var pos = stack.length - 1; pos >= 0; pos--)
          if (stack[pos] == tagName)
            break;

      if (pos >= 0) {
        // Close all the open elements, up the stack
        for (var i = stack.length - 1; i >= pos; i--)
          if (handler.end)
            handler.end(stack[i]);

        // Remove the open elements from the stack
        stack.length = pos;
      }
    }
  };

html = `
<div id="s_wrap" class="s-isindex-wrap">
  <div id="s_main" class="main clearfix">
    <div id="s_mancard_main" class="s-mancacrd-main">
      <div class="s-menu-container">
        <div id="s_menu_gurd" class="s-menu-gurd">
          <div id="s_ctner_menus" class="s-ctner-menus s-opacity-blank8">
            <span id="s_menu_mine" class="s-menu-item s-menu-mine s-opacity-white-background current" data-id="100">
              <div class="mine-icon"></div>
              <div class="mine-text">我的关注</div>
            </span>
            <div class="s-menus-outer">
              <div id="s_menus_wrapper" class="menus-wrapper"></div>
              <div class="s-bg-space s-opacity-white-background"></div>
              <span class="s-menu-music" data-id="3"></span>
            </div>
            <span id="s_menu_set" class="s-menu-setting s-opacity-white-background" data-id="99" title="设置">
              <div class="menu-icon"></div>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`

HTMLParser(html,{
  start: function(tag, attrs, unary) {
    console.log('标签头', tag, attrs)
  },
  end: function (tag) {
    console.log('标签尾', tag)
  },
  //处理真实的节点
  chars: function(text) {
    console.log('标签字段', text.trim().length > 0 ? text : '空字符' )
  }
})

</script>
</body>
</html>